<template>
  <!-- 额度占用情况环图 -->
  <div class="limitPerChartPage">
    <div class="chartBox" id="limitPerChartId"></div>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import echarts from "@/common/utils/echarts.js";
import {changeNumToWan} from "../../utils/handelScreen";

const limitPerChartRef = ref(null);
const lengData = ref([]);
let pieColors = ["#D56383", "#00FF95", "#FFE900", "#F5B157", "#1DA7FF", "#2967EA"]
let richColor = {}
pieColors.forEach((item, idx) => {
  richColor[`color${idx}`] = {
    fontSize: 12,
    color: item
  }
})


const changeGetDataToChart = (getDataArr) => {
  let chartData = [];
  for (let i = 0; i < getDataArr.length; i++) {

    chartData.push({
      value: getDataArr[i].numerical_value || 0,
      name: getDataArr[i].bank,
      percent: getDataArr[i].percent,
      color: pieColors[i],
    });
    lengData.value.push({
      name: getDataArr[i].bank,
      color: pieColors[i],
    });
  }

  let options = reactive({
    // backgroundColor: "#031a40",
    tooltip: {
      confine: true,
      textStyle: {
        fontSize: 14, // 字体大小
      },
      formatter: (params) => {
        return `${params.name}: ${changeNumToWan(params.value)}万元`
      }
    },
    title: {
      //圆环中间内容
      subtext: "",
      left: "25%",
      top: "44%",
      subtextStyle: {
        fontSize: 18,
        fontWeight: "400",
        align: "center",
        color: "#CDDEE1",
      }
    },
    color: pieColors,
    legend: {
      top: 80,
      right: 60,
      orient: "vertical", //改变排列方式
      icon: "roundRect", //改变legend小图标形状
      itemGap: 12, // 设置legend的间距
      itemWidth: 8, // 设置宽度
      itemHeight: 8, // 设置高度
      formatter: (name) => {
        let rate = ''
        let idx = 0

        chartData.some((item, index) => {
          if (item.name === name) {
            idx = index
            rate = (item.percent * 100) + '%'
            return true
          }
        })
        return `${name} {color${idx}|${rate}}`
      },
      textStyle: {
        fontSize: 14,
        color: "#D3E3FF",
        padding: [0, 0, 0, 4],
        rich: richColor
      },
      itemStyle: {
        borderColor: "transparent",
      },
      data: lengData.value,
    },
    series: [
      { // 外圈
        name: "",
        avoidLabelOverlap: true, //防止标签重叠
        type: "pie",
        radius: ["45%", "40%"], //大小
        center: ["30%", "50%"], //位置
        hoverAnimation: true,
        labelLine: {
          show: true,
          lineStyle: {
            width: 1,
          },
          length: 20, // 指示线长度
          length2: 10,
        },
        data: chartData,
        label: {
          show: false,
          position: 'center',
          formatter: function (params) {
            return `${changeNumToWan(params.data.value)}万元\n${params.data.percent * 100}%`
          },
          textStyle: {
            fontSize: "12",
            fontWeight: "400",
            color: "#fff",
          },
          rich: {
            color0: {
              color: "#D56383",
            },
            color1: {
              color: "#00FF95",
            },
            color3: {
              color: "#FFE900",
            },
            color2: {
              color: "#F5B157",
            },
            color4: {
              color: "#1DA7FF",
            },
            color5: {
              color: "#2967EA",
            },
          },
        },
        itemStyle: {
          borderWidth: 10,
        },
        emphasis: {
          label: {
            show: true,
          }
        },
      },
      { // 内圈
        type: "pie",
        zlevel: 2,
        splitNumber: 85,
        radius: ["33%", "30%"], //大小
        center: ["30%", "50%"],
        startAngle: 90,
        endAngle: -269.9999,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: true,
          length: 7,
          lineStyle: {
            width: 4,
            color: "#017383",
          },
        },
        pointer: {
          show: 0,
        },
        detail: {
          show: 0,
        },
      },
    ],
  });

  // options.series[0].data = chartData;


  // limitPerChartRef.value.on('mouseover', (e) => {
  //   options.title.subtext = `${changeNumToWan(e.value)}万元`
  //   limitPerChartRef.value.setOption(options)
  // })
  // limitPerChartRef.value.on('mouseout', () => {
  //   options.title.subtext = ``
  //   limitPerChartRef.value.setOption(options)
  // })
  limitPerChartRef.value.setOption(options);
};

// 在父组件中调用
const initLimitPerChart = (data) => {
  if (!limitPerChartRef.value) {
    limitPerChartRef.value = echarts.init(
        document.getElementById("limitPerChartId")
    );
    // limitPerChartRef.value.setOption(options);
  }

  // initMediaChartData();
  changeGetDataToChart(data)
};
defineExpose({
  initLimitPerChart,
});
</script>

<style lang="scss" scoped>
.limitPerChartPage {
  width: 100%;
  height: 100%;

  .chartBox {
    width: 100%;
    height: 100%;
  }
}
</style>
